<template>
  <!-- 拼团插件与珍惠拼插件 -->
  <div id="group_list">
    <c-title :hide="false" :text="diyTitle"></c-title>
    <van-sticky :offset-top="40" v-if="cateList && cateList.length > 0">
      <van-tabs v-model="activeCateTab" @click="onClickCateTab">
        <van-tab :title="item.name" v-for="item in cateList" :key="item.id">
          <div class="flex tabs-child-box" v-show="item.has_many_children && item.has_many_children.length > 0">
            <div class="tabs-child-btn" :class="{'active-bg': activeCateID == group.id}" v-for="group in item.has_many_children" :key="group.id" @click="onClickCateTabChild(group.id)">
              {{ group.name }}
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </van-sticky>

    <div class="content">
      <van-pull-refresh v-model="isLoading" @refresh="loadTop" success-text="刷新成功">
        <div class="goods_box" v-for="(item, index) in info" :key="index">
          <template v-if="$route.name == 'GroupList' && item.has_one_goods">
            <div class="goods_img">
              <img :src="item.has_one_goods && item.has_one_goods.thumb" />
            </div>
            <ul class="goods_info flex-column" style="">
              <li class="name" style="-webkit-box-orient: vertical;">
                {{ item.title }}
              </li>
              <div style="flex: 1;"></div>

              <group-list-popup :item='item' ></group-list-popup>
              <li class="price" v-if="item.has_many_option_levels && item.has_many_option_levels.length > 0">
                <span>{{ $i18n.t("money") }}</span
                >{{ item.has_many_option_levels[0].group_price }}&nbsp;<span style="text-decoration: line-through;"
                  >{{ $i18n.t("money") }}{{ item.has_many_option_levels[0].has_one_fight_groups_option.option_price }}</span
                >
              </li>
              <li class="number">
                <div class="left" v-if="item.has_many_option_levels && item.has_many_option_levels.length > 0">
                  <i class="iconfont icon-group_list"></i>
                  <span>{{ memberNum(item) }}人</span>
                </div>

                <div class="go_group" @click="goGroup(item.id, item.store_id)">
                  <span>去开团</span>
                  <i class="fa fa-angle-right"></i>
                </div>
              </li>
            </ul>
          </template>
          <template v-if="$route.name == 'zhpGroupList'">
            <div class="goods_img">
              <img :src="item.thumb" />
            </div>
            <ul class="goods_info">
              <li class="name" style="-webkit-box-orient: vertical;">
                {{ item.title }}
              </li>
              <li class="price">
                <span>{{ $i18n.t("money") }}</span
                >{{ item.group_price }}&nbsp;<span style="text-decoration: line-through;" v-if="item.group_price < item.price" >{{ $i18n.t("money") }}{{ item.price }}</span>
              </li>
              <li class="number">
                <div class="left">
                  <i class="iconfont icon-group_list"></i>
                  <span>{{ item.member_count }}人</span>
                </div>

                <div class="go_group" @click="goGroup(item.id)">
                  <span>去参团</span>
                  <i class="fa fa-angle-right"></i>
                </div>
              </li>
            </ul>
          </template>
        </div>
        <div style="height: 120px;"></div>
      </van-pull-refresh>
    </div>
    <router-link v-if="this.$route.name == 'zhpGroupList'" class="order-fixed-btn-cw" tag="div" :to="fun.getUrl('zhpFinance', {})"><van-icon name="after-sale" size="20" />财务</router-link>
    <router-link v-if="this.$route.name == 'zhpGroupList'" class="order-fixed-btn" tag="div" :to="fun.getUrl('zhpMyGroups', {})"><i class="iconfont icon-dingdan1"></i>订单</router-link>
    <p v-if="this.info.length < 1" style="padding: 1rem 0; color: #f60;" @click="goHome">暂无拼团活动，去商城逛逛吧！</p>
  </div>
</template>

<script>
import group_list_controller from "./group_list_controller";

export default group_list_controller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
#group_list {
  background: #f8f8f8;

  .content {
    padding: 0.625rem;
    .goods_box {
      display: flex;
      padding: 0.5rem;
      background: #fff;
      border-radius: 0.5rem;
      margin-bottom: 0.625rem;
      .goods_img {
        width: 7.5rem;
        background: #f8f8f8;
        overflow: hidden;
        border-radius: 0.5rem;
        margin-right: 0.625rem;

        img {
          width: 100%;
          display: block;
        }
      }

      .goods_info {
        width: 14.0625rem;
        text-align: left;

        .name {
          font-size: 14px;
          line-height: 1.25rem;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }

        .price {
          font-size: 18px;
          margin-top: 0.375rem;
          color: var(--themeBaseColor);

          span {
            font-size: 12px;
          }

          span:last-child {
            color: #8c8c8c;
            margin-left: 0.25rem;
          }
        }

        .number {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .left {
            display: flex;
            align-items: center;

            .iconfont {
              font-size: 1.5rem;
              color: var(--themeBaseColor);
              margin-right: 0.375rem;
            }

            span {
              color: var(--themeBaseColor);
              font-size: 14px;
              border-left: solid 0.0625rem #ebebeb;
              padding-left: 0.375rem;
            }
          }

          .go_group {
            width: 4rem;
            height: 1.5rem;
            border-radius: 0.25rem;
            background: var(--themeBaseColor);
            display: flex;
            justify-content: center;
            align-items: center;

            span {
              color: #fff;
              font-size: 12px;
            }

            .fa {
              color: #fff;
              font-size: 1rem;
              margin-left: 6px;
            }
          }
        }
      }
    }
  }

  .order-fixed-btn-cw {
    width: 2.5rem;
    height: 2.5rem;
    box-shadow: 0.047rem 0.081rem 0.156rem 0 rgba(209, 209, 209, 0.36);
    background-image: linear-gradient(#f14e4e, #f14e4e), linear-gradient(#fff, #fff);
    position: fixed;
    bottom: 6rem;
    right: 50%;
    transform: translateX(10rem);
    display: flex;
    justify-content: center;
    flex-direction: column;
    border-radius: 50%;
    color: #fff;
    font-size: 10px;
  }

  .order-fixed-btn {
    width: 2.5rem;
    height: 2.5rem;
    box-shadow: 0.047rem 0.081rem 0.156rem 0 rgba(209, 209, 209, 0.36);
    background-image: linear-gradient(#f14e4e, #f14e4e), linear-gradient(#fff, #fff);
    position: fixed;
    bottom: 3rem;
    right: 50%;
    transform: translateX(10rem);
    display: flex;
    justify-content: center;
    flex-direction: column;
    border-radius: 50%;
    color: #fff;
    font-size: 10px;
  }
}

.allteam {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: 100%;

  .allLeft {
    flex: 1;
    display: flex;
    overflow: hidden;

    .teamNo {
      color: var(--themeBaseColor);
      max-width: 55%;

      /* overflow: hidden; */

      /* text-overflow: ellipsis; */
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .teamTwo {
      flex: 1;
    }
  }

  .allRight {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.open_group {
  background: #fff;
  padding: 0.625rem;
  border-radius: 0.5rem;

  p {
    font-size: 14px;
    margin-bottom: 0.625rem;
  }

  .icon_close {
    position: absolute;
    top: 0.25rem;
    right: 0;
    width: 2.5rem;
    height: 2.5rem;

    .iconfont {
      line-height: 2.5rem;
      font-size: 0.875rem;
      color: #999;
    }
  }
}
.tabs-child-box {
  padding: 0 12px;
  background: #f8f8f8;
  overflow-x: scroll;
}
.tabs-child-btn {
  text-align: center;
  padding: 0 1rem;
  line-height: 1.625rem;
  background: #ededed;
  color: #101010b5;
  border-radius: 1rem;
  margin-right: 0.5rem;
  white-space: nowrap;
}
.active-bg {
  background-color: var(--themeBaseColor);
  color: #ffffff;
}
::v-deep .van-tabs__nav {
  background-color: #f8f8f8;
}
::v-deep .van-tab--active {
  font-weight: bold;
  font-size: 16px;
  color: var(--themeBaseColor);
}
::v-deep .van-tabs__line {
  background-color: var(--themeBaseColor);
  width: 20px;
  bottom: 20px;
}
</style>
